import React, { Component } from 'react';
import {
    FlatList,
    Text,
    View,
    Image,
    TouchableHighlight,
    Dimensions
} from 'react-native';
// import { Test } from '../test';

export default class List extends React.Component{
    constructor(){
        super();
        this.state={
            data:[{
                key:'1',
                title:'40CR圆钢 65MN弹簧钢 GCR15 CR12MOV 42CRMO DC53 H13 45号圆钢板',
                city:'北京'
            },
            {
                key:'2',
                title:'40CR圆钢 65MN弹簧钢 GCR15 CR12MOV 42CRMO DC53 H13 45号圆钢板',
                city:'南京'
            },
            {
                key:'3',
                title:'40CR圆钢 65MN弹簧钢 GCR15 CR12MOV 42CRMO DC53 H13 45号圆钢板',
                city:'上海'
            },
            ]
        }
    }
    listView=(item)=>{
        return (//item列表，单独提出来，以便更改
            <View style={[styles.content]}>
                <Image  style={[styles.imgs,{flex:1}]} resizeMode='contain' source={require('../../assets/img/item-img.png')}/>
                <View style={{flex:2,flexDirection:'column'}}>
                    <Text style={{paddingBottom:5,paddingVertical:4}}>{item.item.title}</Text>
                    <View style={{borderWidth:1,borderColor:'#ddd',borderStyle :'dotted'}}></View>
                    <View style={{flex:1,flexDirection: 'row'}}>
                        <Text style={{flex:1,fontSize:30,fontWeight:'bold',color:'#000'}}>400</Text>
                        <Text style={{flex:2,textAlign:'left',marginLeft:3,lineHeight:50,fontWeight:'bold',color:'#000'}}>吨</Text>
                        <Text style={{flex:1,lineHeight:50,textAlign:'right'}}>{item.item.city}</Text>
                    </View>
                    <View style={{flex:1,flexDirection: 'row',marginBottom:10,justifyContent:'space-around'}}>
                        <Text style={{flex:1}}>诚信商家</Text>
                        <Text style={{flex:1}}>质量保证</Text>
                        <Text style={{flex:1}}>优质服务</Text>
                    </View>
                    <View style={{flex:1}}>
                        <Text style={[styles.toDetail,{color:'#999'}]}>点击查看详情>></Text>
                    </View>
                </View>
            </View>
        )
    }
    _separator = () => {//item之间的间隔
        return <View style={{height:10,backgroundColor:'transparent'}}/>;
    }
    render(){
        return(
            <FlatList
            data={this.state.data}
            renderItem={this.listView}
            ItemSeparatorComponent={this._separator}
            >

            </FlatList>
        )
    }
}
const styles={
    content:{
        flex:1,
        borderColor:'#c8c8c8',
        borderWidth:1,
        flexDirection: 'row',
        alignItems: 'center',
        // justifyContent: 'center',
        width:Dimensions.get('window').width-20,
        marginLeft:10,
        marginTop:5,
        paddingVertical:10,
        paddingRight:5,
    },
    toDetail:{
        textAlign:'right',
        borderTopWidth:0.5,
        borderTopColor:"#999",
        paddingTop:15,
        marginRight:10,
        fontSize:12
    },
    center:{
        alignItems: 'center',
        justifyContent: 'center',
    },
    imgs:{
        height:135,
        marginRight:8,
    }
}